<template>
  <div class="body">
    <!-- 头部导航 -->
    <div class="navbar">
      <img class="tb" src="/img/fh.png" alt="" @click="onClickLeft" />
      <span>发布日记</span>
    </div>
    <div class="kkk"></div>
    <!-- 猫咪名字 -->
    <span class="s1">宠物名字</span>
    <div>
      <input type="text" maxlength="8" v-model="nameOne" />
      <!-- <input type="text" maxlength="8" v-if="show"> -->
      <img src="/img/zj.png" alt="" @click="show = true" v-if="!show" />
      <div class="aaa" v-show="show">
        <input type="text" maxlength="8" v-if="show" v-model="nameTwo" />
        <img src="/img/zj.png" alt="" @click="show1 = true" v-if="!show1" />
        <input type="text" maxlength="8" v-if="show1" v-model="nameThree" />
      </div>
    </div>

    <span class="s1">填写日记</span>
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      placeholder="分享新鲜事（日记不超过150字）"
      maxlength="150"
      v-model="text"
    ></textarea>

    <span class="s1">上传小视频</span>
    <!-- 上传猫咪视频 -->
    <van-uploader
      v-model="fileList"
      multiple
      :max-count="1"
      accept="avi , flv , mpg , mpeg , mpe , m1v , m2v , mpv2 , mp2v , dat , ts , tp , tpr , pva , pss , mp4 , m4v , m4p , m4b , 3gp , 3gpp , 3g2 , 3gp2 , ogg , mov , qt , amr , rm , ram , rmvb , rpm"
      capture="camera"
      :max-size="200 * 1024 * 1024"
      :after-read="handleToUpload"
    />

    <!--底部预定部分 -->
    <van-goods-action>
      <van-goods-action-button
        @click="getUpoadDairy"
        color="#f8e176"
        type="warning"
        text="立即发布"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      show: false,
      show1: false,
      nameOne: "",
      nameTwo: "",
      nameThree: "",
      text: "",
      fileAdd: "", //视频地址
    };
  },
  methods: {
    getUpoadDairy() {
      let dairy = {
        tag: this.nameOne,
        diary: this.text,
        video: this.fileAdd,
      };
      const url = "/client/addDiary";
      this.axios.post(url, dairy).then((res) => {
        // console.log('发布日记',res.data);
        if (res.data.code == 200) {
          this.$toast("发布成功");
          this.$router.push(`/diary`);
        }
      });
    },
    //上传文件
    handleToUpload(file) {
      let formData = new FormData();
      formData.append("file", file.file);
      this.axios.post("/admin/upload", formData).then((res) => {
        let fileUrl = res.data.data[0].url;
        this.fileAdd = fileUrl;
        console.log('上传视频地址',this.fileAdd);
      

      });
    },
    //返回
    onClickLeft() {
      this.$router.push("/diary");
    },
  },
};
</script>

<style lang="scss" scoped>
.aaa {
  display: inline;
}
.body {
  widows: 100%;
  padding: 10px;
}
img {
  width: 25px;
  margin-left: 7px;
  margin-right: 7px;
}
.s1 {
  display: block;
  //  position: relative;
  // top: 1vw;
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 15px;
}
input {
  height: 10vw;
  // position: relative;
  // top: 3vw;
  width: 30%;
  padding: 10px;
  border: 0;
  background-color: #f7f8fa;
  border-radius: 7px;
  margin-left: 10px;
}
::v-deep .van-uploader__wrapper {
  //    margin: 10px 0 1px 0;
  border-radius: 10px;
}
::-webkit-input-placeholder {
  /*Webkit browsers*/
  color: #999;
  font-size: 14px;
}
textarea {
  // margin: 10px 0 1px 0;
  width: 100%;
  padding: 15px;
  height: 40vw;
  border: 0;
  background-color: #f7f8fa;
  border-radius: 10px;
}
.kkk {
  height: 13vw;
}
.tb {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3vw;
  right: 3vw;
  display: inline-block;
}
.navbar {
  width: 100%;
  height: 13vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: white;
  text-align: center;
  line-height: 13vw;
  // background-color: aqua;
  img {
    position: relative;
    top: 0vw;
    left: -35vw;
  }
}
</style>